<template>
  <h1>{{person}}</h1>
  <button @click="changePerson">点击修改person</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "About",
});
</script>

<script setup lang="ts">
  import {ref , watch} from "vue"

  const person = ref({
    name: "刘·二",
    age: 36,
    sex: "男",
    scrol:{
      en: 100,
      math: ["1" , "2" , "3"]
    }
  })
  const changePerson = () => {
    // person.value.name = "11111"

    // person.value.age = 100
    // person.value.scrol.en = 1000

    // person.value.scrol.math[2] = "11111"

    // person.value.age++

    // person.value.scrol = {
    //   en: 100000,
    //   math: ["1" , "2" , "3"]
    // }
    person.value.scrol.en++

  }

  //1.监听ref对象 直接修改ref的属性值value可以检测到，修改value中的数据要开启深度监听
  /* watch(person , (newval , oldval)=>{
    console.log("watch执行了" , newval , oldval);
  } , {deep:true}) */

  //2.监听ref对象中的value对象,监听的是value对象内部的属性默认开启深度监听
  /* watch(person.value , (newval , oldval) => {
    console.log(newval , oldval);
  }) */

  //3.监听ref对象中的value中的对象类型的属性
  /* watch(person.value.scrol , (newval , oldval) => {
    console.log(newval , oldval);
  }) */

  //4.监听ref对象中的value中的基本类型的属性 , 用函数写法
  /* watch(()=>person.value.age , (newval , oldval) => {
    console.log(newval , oldval);
  }) */

  //5.监听ref对象中的value中的对象类型的属性，但写成函数形式
  /* watch(()=>person.value.scrol , (newval , oldval) => {
    console.log(newval , oldval);
  } , {deep:true}) */

  //6.监听多个属性 , 数组写法，每一项是函数
  watch([()=>person.value.scrol , ()=>person.value.age]  ,(newval , oldval) => {
    console.log(newval , oldval);
  } , {deep:true})

  //7.监听多个属性分开写
  watch(person.value.scrol , (newval , oldval) => {
    console.log(newval , oldval);
  })
  watch(()=>person.value.age , (newval , oldval) => {
    console.log(newval , oldval);
  })

</script>